<template>
	<view class="registerPage">
		<form class="form" @submit="submit">
			<!-- 账号 -->
			<label class="accountNumber">
				<view class="tips">账号:</view>
				<input id="accountNumber" name="accountNumber" type="text" v-model.trim="user.accountNumber"
					placeholder="请输入账号" />
				<view class="clear" v-if="user.accountNumber">&#xe609;</view>
			</label>

			<!-- 密码 -->
			<label class="pwd">
				<view class="tips">密码:</view>
				<input id="pwd" name="pwd" type="text" :password="eyePwd" v-model.trim="user.pwd" placeholder="请输入密码" />
				<view class="clear" v-if="user.pwd">&#xe609;</view>
				<view class="eye" @tap.stop="eyePwd = !eyePwd">{{eyePwd ? '&#xe60c;' : '&#xe60d;' }}</view>
			</label>

			<!-- 确认密码 : -->
			<label class="againPwd">
				<view class="tips">确认密码:</view>
				<input id="againPwd" name="againPwd" type="text" v-model.trim="user.againPwd" placeholder="请输入密码" />
				<view class="clear" v-if="user.againPwd">&#xe609;</view>
			</label>

			<!-- 姓名 -->
			<label class="name">
				<view class="tips">姓名:</view>
				<input id="name" name="name" type="text" v-model.trim="user.name" placeholder="请输入姓名" />
				<view class="clear" v-if="user.name" @tap="clear('name')">&#xe609;</view>
			</label>

			<!-- 身份证 -->
			<label class="id">
				<view class="tips">身份证:</view>
				<input id="id" type="idcard" v-model.trim="user.id" placeholder="请输入身份证" />
				<view class="clear" v-if="user.id">&#xe609;</view>
			</label>

			<!-- 手机 -->
			<label class="phone">
				<view class="tips">手机:</view>
				<input id="phone" type="text" v-model.number="user.phone" placeholder="请输入手机号码" />
				<view class="clear" v-if="user.phone">&#xe609;</view>
			</label>

			<!-- 验证码 -->
			<label class="verCode">
				<view class="tips">手机:</view>
				<input id="verCode" type="text" v-model.number="user.verCode" placeholder="请输入验证码" />
				<view class="clear">{{user.verCode ? '&#xe609;':''}}</view>
				<button class="getVerCode">获取验证码</button>
			</label>

			<button class="submit" form-type="submit">注册</button>
		</form>

	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue"

	// 是否查看密码，刚开始时是闭眼(默认false)
	let eyePwd = ref(false)

	let user = reactive({
		accountNumber: "",
		pwd: "",
		againPwd: "",
		name: "",
		id: "",
		phone: "",
		verCode: "",
	})

	let clear = (v: any) => {
		console.log(user[v])
		user[v] = ""
	}

	let submit = (e: any) => {
		console.log("好的饿了吧", JSON.stringify(e?.target?.value, null, 2))
	}
</script>

<style lang="scss" scoped>
	.registerPage {
		background-color: #f4f6f6;
		color: #fff;
		min-height: inherit;
		display: flex;
		flex-direction: column;

		// 背景图片
		background: transparent url("https://nntzback.jyhdkj.com/profile/upload/2022/11/18/bg_jianzhu_20221118100418A002.png") no-repeat scroll center bottom;
		background-size: contain;
	}

	.form {
		padding: 20rpx;

		label {
			border-bottom: 1rpx solid #dcdfe6;
		}
	}

	.accountNumber,
	.pwd,
	.againPwd,
	.name,
	.id,
	.phone {
		height: 110rpx;
		display: flex;
		font-size: 26rpx;
	}

	// 眼睛、清除
	.eye,
	.clear {
		flex: 0 0 25px;
		color: #c0c4cc;
		font-family: "iconfont";
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tips {
		flex: 0 0 60px;
		height: 100%;
		display: flex;
		align-items: center;
		color: #434343;
	}

	input {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		color: #303133;
	}

	.verCode {
		display: grid;
		grid-template-columns: 60px auto 25px;
		grid-template-rows: 110rpx auto;
		padding-bottom: 20rpx;

		.tips {
			grid-row: 1/-1;
		}
	}

	// 获取验证码
	.getVerCode {
		width: 180rpx;
		height: 62rpx;
		line-height: 62rpx;
		background-color: #2163E0;
		color: #fff;
		font-size: 26rpx;
		border-radius: 8rpx !important;
		overflow: hidden !important;
	}

	.submit {
		background-color: #2163E0;
		border-radius: 0;
		font-size: 34rpx;
		margin-top: 160rpx;
		color: #fff;
	}
</style>
